<template>
  <view class="box">
    <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <image
        @click.stop="fanhui"
        class="image1"
        src="https://pic.bangbangtongcheng.com/8937350f727e4eeda6e97ab0d7398e65"
      />
      <!-- #ifndef MP-WEIXIN -->
      会员礼品赠送
      <!-- #endif -->
      <!-- #ifdef MP-WEIXIN -->
      <text @click="fanhui" style="margin-left: 75rpx">会员礼品赠送</text>
      <!-- #endif -->
    </view>
    <view class="center">
      <view class="hycph"> 会员车牌号：{{ licensePlateNumber }} </view>
      <view class="chooseGift">
        <view class="chooseGift_top" @click="lpchage = !lpchage">
          <view class="" style="line-height: 42rpx">选择礼品</view>
          <image
            v-if="lpchage"
            class="image"
            src="https://pic.bangbangtongcheng.com/static/bbcz/arrow_bottom.png"
            mode=""
          ></image>
          <image
            v-else
            class="image"
            src="https://pic.bangbangtongcheng.com/static/bbcz/arrow_top.png"
            mode=""
          ></image>
        </view>

        <view class="chooseGift_bottom" v-if="!lpchage">
          <view
            class="chooseGift_bottom_item"
            v-for="(item, index) in giftInformationList"
            :key="index"
          >
            <checkbox
              class="checkboxs"
              :checked="item.active"
              :data-index="index"
              @click="changeRadio"
            >
            </checkbox>
            <view class="commodity">
              <image
                class="commodity_image"
                :src="item.giftInformation.giftPicture"
                mode="aspectFill"
              ></image>
              <!-- <image class="commodity_image" src="../static/bg.jpg" mode="aspectFill"></image> -->
              <view class="">
                {{ item.giftInformation.giftName }}
              </view>
            </view>
          </view>
          <view
            class="new-chooseGift_bottom_item"
            style="
              padding: 20rpx 16rpx;
              font-size: 28rpx;
              font-weight: 400;
              color: #333333;
              line-height: 39rpx;
            "
          >
            二选一专区
          </view>
        </view>
      </view>
      <!-- 上传图片 -->
      <view class="uploadPhotos">
        <view class="uploadPhotos_left">
          <view class="title">
            <span style="color: #e00000">*</span>
            上传现场照片
          </view>
          <view
            class="images"
            v-for="(item, index) in headerImage"
            :key="index"
            @tap="ViewImagefm"
            :data-url="headerImage[index].url"
          >
            <view class="maskimg" v-show="item.isShow"></view>
            <cCircle
              class="cCircle"
              v-show="item.isShow"
              :class="item.progress == 100 ? 'hide1' : ''"
              :circleWidth="4"
              :size="60"
              :percent="Number(item.progress)"
            ></cCircle>
            <image class="image" :src="imgUrl + headerImage[index].url" mode="aspectFit" />
            <view class="colse" @tap.stop="DelImgfm" :data-index="index">
              <text class="cuIcon-close"></text>
            </view>
          </view>
          <view class="shangchuan" v-if="headerImage.length < 1">
            <view class="cu-form-group">
              <view class="grid col-4 grid-square flex-sub">
                <view class="solids shangchuan-img" @tap="ChooseImages()">
                  <text class="cuIcon-cameraadd"></text>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="uploadPhotos_right">
          <view class="title2" style="color: white"> 示例图 </view>
          <view class="uploadPhotos_right_img">
            <image
              class="image"
              src="https://pic.bangbangtongcheng.com/f45284482fdf481092c195f661d0770a"
              mode="aspectFill"
            ></image>
            <view class="title">示例图</view>
          </view>
        </view>
      </view>
    </view>
    <view class="submit" @click="panduanCP"> 提交 </view>
    <!-- 提交弹窗 -->
    <uni-popup ref="tijiaos" mode="center">
      <view class="tijiaos_frame">
        <view class="title"> 会员礼品赠送 </view>
        <view class="tijiaos_one" v-if="assa == 1">
          <image
            class="image"
            src="https://pic.bangbangtongcheng.com/static/bbcz/expression_02.png"
            mode=""
          >
          </image>
          <view class="lqcg">领取成功</view>
          <view class="lqsj"
            ><span style="color: #64b6a8; margin-right: 20rpx">领取时间</span>{{ datetime }}</view
          >
          <view class="lqfs"
            ><span style="color: #64b6a8; margin-right: 20rpx">领取方式</span> 到店领取</view
          >
        </view>
        <view class="tijiaos_one" v-if="assa == 2">
          <image
            class="image"
            src="https://pic.bangbangtongcheng.com/static/bbcz/expression_01.png"
            mode=""
          >
          </image>
          <view class="lqsb">领取失败</view>
          <view class="zhyc">账号异常，请提醒会员登录帮帮同城确认</view>
        </view>
        <view class="tijiaos_one" v-if="assa == 3">
          <image
            class="image3"
            src="https://pic.bangbangtongcheng.com/icon/expression_04.png"
            mode=""
          >
          </image>
          <view class="zhyc">本月礼品已全部领取，敬请期待下月好礼~</view>
        </view>
        <view class="determine" @click="queding"> 确定 </view>
      </view>
    </uni-popup>
    <!-- 照片弹窗 -->
    <uni-popup ref="binds" mode="center">
      <view class="binds_frame">
        <view class="binds_frame_t">当前上传的车牌号与实际车牌号不符，请重新上传!</view>
        <view class="binds_frame_b" @click="jcbdCancel"> 确定 </view>
      </view>
    </uni-popup>
    <!-- #ifdef MP-WEIXIN -->
    <cropper ref="croop" v-show="showCroop" :quality="1" resize: false :canScale="true"
    selWidth="600rpx" selHeight="400rpx" style='z-index:1000' @upload="myUpload" class="userHeader"
    />
    <!-- #endif -->
    <!-- #ifndef MP-WEIXIN-->
    <gmy-img-cropper
      ref="gmyImgCropper"
      quality="1"
      cropperType="ratio"
      :ratio="1.5"
      fileType="png"
      imgSrc=""
      style="z-index: 1000"
      @getImg="myUpload"
    >
    </gmy-img-cropper>
    <!-- #endif -->
    <uniBall></uniBall>
  </view>
</template>

<script>
  import cCircle from '../components/circle.vue'
  import permision from '@/js_sdk/wa-permission/permission.js'
  import { mapGetters } from 'vuex'
  //#ifdef H5
  import wxshare from '../utils/index.js'
  //#endif
  //#ifdef MP-WEIXIN
  import cropper from '../components/lxiaoxiao-cropper/lxiaoxiao-cropper.vue'
  //#endif
  // #ifndef MP-WEIXIN
  import gmyImgCropper from '../components/gmy-img-cropper/gmy-img-cropper.vue'
  //#endif
  export default {
    components: {
      // #ifndef MP-WEIXIN
      gmyImgCropper,
      //#endif
      //#ifdef MP-WEIXIN
      cropper,
      //#endif
      cCircle,
    },
    data() {
      return {
        imgUrl: this.$imgSrc,
        userInfo: uni.getStorageSync('Pduser'),
        Recommend: [],
        lpchage: false,
        headerImage: [],
        assa: 1,
        licensePlateNumber: '',
        codeId: '',
        giftInformationList: [
          {
            giftInformation: {
              giftName: '这是礼品',
            },
          },
          {
            giftInformation: {
              giftName: '这是礼品',
            },
          },
          {
            giftInformation: {
              giftName: '这是礼品',
            },
          },
        ],
        lipingId: [],
        // 图片获取的车牌号
        licensePlate: '',
        datetime: '',
        // 小程序裁剪是否展示
        showCroop: false,
      }
    },
    computed: {
      ...mapGetters(['statusBarHeight1', 'userinfo']),
    },
    onLoad(option) {
      this.licensePlateNumber = option.licensePlateNumber
      this.codeId = option.codeId
      this.giftsMerchants()
      /* #ifdef H5 */
      this.jinzhi()
      /* #endif */
    },
    methods: {
      // 获取商家发放礼品数据
      giftsMerchants() {
        let that = this
        return
        this.$myRequest
          .get('/api/mobile/vehicleOwner/getDropDownListGiftInformation', {
            merchantId: this.userInfo.merchantId,
          })
          .then((res) => {
            res.giftInformation.pageList.forEach((v) => {
              v.active = false
            })
            this.giftInformationList = res.giftInformation.pageList
          })
      },
      // 判断上传图片是否和二维码车牌号一致
      panduanCP() {
        if (this.headerImage.length == 0) {
          uni.showToast({
            title: '请上传图片',
            icon: 'none',
            mask: true,
          })
          return false
        }
        if (this.licensePlate == this.licensePlateNumber) {
          this.Submit()
        } else {
          this.$refs.binds.open()
        }
      },
      // 提交礼品发放
      Submit() {
        // this.$refs.binds.open()
        // this.$refs.tijiaos.open()
        let giftId = ''
        this.giftInformationList.forEach((v) => {
          if (v.active) {
            giftId = v.giftId
          }
        })
        if (!giftId) {
          uni.showToast({
            title: '请选择礼品',
            icon: 'none',
            mask: true,
          })
          return false
        }
        this.$myRequest
          .post('/api/mobile/vehicleOwner/giveMembershipGifts', {
            codeId: this.codeId,
            userId: this.userInfo.id,
            lssuedBy: this.userInfo.merchantStaffId
              ? this.userInfo.merchantStaffId
              : this.userInfo.merchantId,
            merchantId: this.userInfo.merchantId,
            roleType: this.userInfo.merchantStaffId ? '1' : '0',
            giftId: giftId,
            licensePlateNumber: this.licensePlateNumber,
          })
          .then((res) => {
            if (res.code == 200) {
              this.datetime = res.distributionTime
              this.assa = 1
            } else if (res.code == 60016) {
              this.assa = 2
            } else if (res.code == 60014) {
              this.assa = 3
            }
            this.$refs.tijiaos.open()
          })
      },
      // 上传图片获取车牌号
      obtainLicense() {
        this.$myRequest
          .post('/api/mobile/public/licensePlateRecognition', {
            photoUrl: this.headerImage[0],
          })
          .then((res) => {
            this.licensePlate = res.licensePlateRecognition.words_result.number
          })
      },
      jcbdCancel() {
        this.$refs.binds.close()
      },
      queding() {
        this.$refs.tijiaos.close()
        if (this.assa == 1) {
          this.fanhui()
        }
      },
      changeRadio(e) {
        let index = ''
        index = e.currentTarget.dataset.index
        if (this.giftInformationList[index].active) {
          this.giftInformationList[index].active = !this.giftInformationList[index].active
        } else {
          this.giftInformationList.forEach((v) => {
            v.active = false
          })
          this.giftInformationList[index].active = !this.giftInformationList[index].active
        }
      },
      fanhui() {
        uni.navigateBack({
          delta: 1,
        })
      },
      jinzhi() {
        let _this = this
        let param = window.location.href.split('#')[0]
        uni.request({
          method: 'post',
          data: {
            url: param,
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded',
          },
          url: 'https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do',
          success(re) {
            _this.jinzhifx(re.data)
          },
        })
      },
      jinzhifx(data) {
        wxshare.config({
          debug: false, //是否打开调试
          appId: data.appId, // 公众号的唯一标识
          timestamp: data.timestamp, // 生成签名的时间戳
          nonceStr: data.nonce, // ，生成签名的随机串
          signature: data.signature, // 签名
          jsApiList: ['hideMenuItems'],
        })
        // 禁止分享
        wxshare.hideMenuItems({
          // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
          menuList: [
            'menuItem:share:appMessage',
            'menuItem:share:timeline',
            'menuItem:share:timeline',
            'menuItem:share:qq',
            'menuItem:favorite',
            'menuItem:share:QZone',
            'menuItem:openWithSafari',
          ],
        })
      },
      async ChooseImages(menthType, type) {
        this.otherChooseImage()
      },
      otherChooseImage() {
        // #ifdef MP-WEIXIN
        this.showCroop = true
        this.$refs.croop.fSelect()
        //  #endif
        // #ifndef MP-WEIXIN
        this.$refs.gmyImgCropper.chooseImage(true)
        //  #endif
      },
      myUpload(rsp) {
        let filePath = ''
        // #ifndef MP-WEIXIN
        filePath = rsp
        // #endif
        // #ifdef MP-WEIXIN
        filePath = rsp.path
        this.showCroop = false
        //  #endif
        var _this = this
        this.headerImage = [
          {
            progress: 0,
            isShow: true,
            url: filePath,
          },
        ]
        var uper
        uni.showToast({
          title: '正在上传请稍后',
          icon: 'none',
          duration: 2000,
        })
        uper = uni.uploadFile({
          // 需要上传的地址
          url: 'https://www.bangbangtongcheng.com/conven/ht/attach/qnUpload',
          // filePath 需要上传的文件
          filePath: filePath,
          name: 'file',
          success(res1) {
            _this.headerImage[0].url = JSON.parse(res1.data).data[0].url
            setTimeout(() => {
              _this.headerImage[0].isShow = false
            }, 2000)
            _this.obtainLicense()
          },
        })
        // onProgressUpdate 上传对象更新的方法
        uper.onProgressUpdate(function (res) {
          _this.headerImage[0].progress = res.progress
        })
      },
      DelImgfm(e) {
        uni.showModal({
          title: '',
          content: '确定要删除图片？',
          cancelText: '取消',
          confirmText: '确定',
          success: (res) => {
            if (res.confirm) {
              this.headerImage.splice(e.currentTarget.dataset.index, 1)
            }
          },
        })
      },
      ViewImagefm(e) {
        uni.previewImage({
          urls: this.headerImage,
          current: e.currentTarget.dataset.url,
        })
      },
    },
  }
</script>

<style lang="less" scoped>
  page {
    background-color: #fff;
  }

  .box {
    width: 100%;
    min-height: 100vh;
    background-color: #fff;
  }

  /deep/ uni-checkbox:not([disabled]) .uni-checkbox-input:hover {
    border-color: #999;
  }

  /deep/uni-checkbox .uni-checkbox-input {
    background-color: rgba(0, 0, 0, 0);
    border: 2rpx solid #999;
  }

  /deep/uni-checkbox .wx-checkbox-input,
  /deep/uni-checkbox .uni-checkbox-input {
    width: 48rpx;
    height: 48rpx;
  }

  /deep/.uni-checkbox-input-checked {
    background-color: #64b6a8 !important;
    border: 2rpx solid #64b6a8 !important;
  }

  /deep/ uni-checkbox::before {
    font-size: 40rpx;
    margin-top: -14rpx;
    right: 6rpx !important;
  }

  .shangchuan-img {
    width: 200rpx !important;
    height: 200rpx !important;
  }

  .tou {
    position: relative;
    width: 100%;
    // height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    font-size: 36rpx;
    color: #000;
    background-color: #fff;
    /* #ifdef MP-WEIXIN */
    text-align: left;
    display: flex;
    align-items: center;
    /* #endif */

    .image1 {
      position: absolute;
      width: 32rpx;
      height: 32rpx;
      // top: 116rpx;
      left: 30rpx;
    }

    .image2 {
      position: absolute;
      width: 56rpx;
      height: 56rpx;
      // top: 28rpx;
      /* #ifdef MP-WEIXIN */
      position: initial;
      margin-left: auto;
      margin-right: 200rpx;
      /* #endif */
      bottom: 16rpx !important;
      right: 30rpx;
      // #ifdef APP
      // top: 50%;
      // #endif
    }
  }

  .center {
    padding: 0 30rpx;

    .hycph {
      margin-top: 40rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #333333;
    }

    .chooseGift {
      width: 100%;
      margin-top: 20rpx;
      border-radius: 8rpx;
      border: 1px solid #f0f0f0;

      .chooseGift_top {
        height: 88rpx;
        background-color: transparent;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 24rpx;
        font-size: 30rpx;
        font-weight: 400;
        color: #333333;

        .image {
          width: 28rpx;
          height: 14rpx;
        }
      }

      .chooseGift_bottom {
        // margin:35rpx 0;
        padding: 0 24rpx;

        .chooseGift_bottom_item {
          display: flex;
          align-items: center;
          margin-bottom: 20rpx;

          .checkboxs {
            margin-right: 20rpx;

            ::v-deep {
              .wx-checkbox-input,
              .uni-checkbox-input {
                margin: 0;
                width: 16px;
                height: 16px;
              }
            }
          }
          ::v-deep uni-checkbox::before {
            font-size: 24rpx;
          }

          .commodity {
            display: flex;
            font-size: 26rpx;
            font-weight: 400;
            color: #333333;

            .commodity_image {
              width: 98rpx;
              height: 98rpx;
              border-radius: 0rpx;
              margin-right: 20rpx;
            }
          }
        }

        .chooseGift_bottom_item:nth-child(1) {
          margin-top: 0;
        }
      }
    }

    .uploadPhotos {
      display: flex;
      // justify-content: space-between;
      margin-top: 40rpx;

      .uploadPhotos_left {
        display: flex;
        flex-direction: column;

        .title {
          margin-bottom: 20rpx;
          font-size: 28rpx;
          font-weight: 500;
          color: #333333;
        }

        .images {
          position: relative;
          width: 212rpx;
          height: 212rpx;
          .cCircle {
            // background: rgba(0,0,0,0.5);
            width: 120rpx;
            height: 120rpx;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
          .maskimg {
            background: rgba(0, 0, 0, 0.5);
            width: 100%;
            height: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
          .hide1 {
            animation: change 3s;
          }
          @keyframes change {
            0% {
              opacity: 1;
            }
            100% {
              opacity: 0;
            }
          }

          .colse {
            position: absolute;
            top: 0;
            right: 0;
            background-color: #f0f0f0;
            border-radius: 0 8rpx 0 8rpx;
          }
        }
      }

      .uploadPhotos_right {
        display: flex;
        flex-direction: column;
        position: relative;

        .uploadPhotos_right_img {
          position: relative;
          width: 200rpx;
          height: 200rpx;
          border-radius: 8rpx;
          overflow: hidden;

          .title {
            position: absolute;
            bottom: 0%;
            left: 0%;
            width: 200rpx;
            height: 48rpx;
            line-height: 48rpx;
            text-align: center;

            font-size: 30rpx;
            font-weight: 400;
            color: #ffffff;
            background: #666666;
            border-radius: 0 0 8rpx 8rpx;
          }
        }

        .title2 {
          margin-bottom: 20rpx;
          font-size: 28rpx;
          font-weight: 500;
          color: #333333;
        }

        .image {
          width: 200rpx;
          height: 200rpx;
          border-radius: 8rpx;
          vertical-align: middle;
        }
      }
    }
  }

  .grid.col-4.grid-square > uni-view {
    width: 160rpx;
    height: 160rpx;
  }

  .cu-form-group {
    padding: 0;
  }

  .submit {
    position: fixed;
    left: 50%;
    bottom: 160rpx;
    transform: translateX(-50%);
    width: 560rpx;
    height: 88rpx;
    background-color: #64b6a8;
    border-radius: 44rpx;
    font-size: 34rpx;
    font-weight: 400;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .tijiaos_frame {
    width: 600rpx;
    background-color: #ffffff;
    border-radius: 10rpx;
    padding: 46rpx;
    text-align: center;

    .title {
      font-size: 30rpx;
      font-weight: 550;
      color: #000000;
      margin-bottom: 28rpx;
    }

    .tijiaos_one {
      display: flex;
      flex-direction: column;
      // align-items: center;
      text-align: left;

      .image {
        width: 78rpx;
        height: 78rpx;
        margin: 0 auto;
        margin-bottom: 12rpx;
      }

      .image3 {
        width: 78rpx;
        height: 78rpx;
        margin: 0 auto;
        margin-bottom: 30rpx;
      }

      .lqcg {
        font-size: 26rpx;
        font-weight: 400;
        color: #64b6a8;
        text-align: center;
        margin-bottom: 22rpx;
      }

      .lqsb {
        font-size: 26rpx;
        font-weight: 400;
        color: #333333;
        text-align: center;
        margin-bottom: 22rpx;
      }

      .zhyc {
        font-size: 26rpx;
        font-weight: 400;
        color: #333333;
        text-align: center;
      }

      .lqsj {
        font-size: 26rpx;
        font-weight: 400;
        color: #333333;
        margin-left: 72rpx;
      }

      .lqfs {
        font-size: 26rpx;
        font-weight: 400;
        color: #333333;
        margin-left: 72rpx;
      }
    }

    .determine {
      width: 480rpx;
      height: 70rpx;
      background-color: #64b6a8;
      border-radius: 10rpx;
      font-size: 30rpx;
      font-weight: 400;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      margin-top: 30rpx;
    }
  }

  .binds_frame {
    width: 600rpx;
    height: 286rpx;
    background-color: #ffffff;
    border-radius: 10rpx;
    text-align: center;
    position: relative;

    .binds_frame_t {
      font-size: 30rpx;
      font-weight: 550;
      color: #000000;
      padding: 0 46rpx;
      padding-top: 36rpx;
    }

    .binds_frame_b {
      width: 480rpx;
      height: 70rpx;
      margin: 0 auto;
      margin-top: 30rpx;
      background-color: #64b6a8;
      border-radius: 10rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30rpx;
      font-weight: 400;
      color: #ffffff;
    }
  }
</style>
